//进来
@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translate3d(-150%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) rotate(0);
  }
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    transform: translate3d(-150%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) rotate(0);
  }
}

//出去
@keyframes rollOut {
  0% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) rotate(0);
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate(120deg);
    display: none;
  }
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) rotate(0)
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate(120deg);
    display: none;
  }
}

.notice_wrap {
  z-index: 999;
  font-size: 1.4rem;
  .model {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.2);
    }
    .modelBox {
      width: 24rem;
      color: #3a3a3a;
      background: #fff;
      position: absolute;
      left: 50%;
      //transform: translate(-50%, 0);
      //-webkit-transform: translate(-50%, 0);
      top: 22%;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      box-shadow: 1px 1px 10px 1px #696969;
      p {
        text-align: center;
        padding: 1rem 0;
        font-size: 1.3rem;
      }
      .title {
        font-size: 1.4rem;
        //border-bottom: 1px solid #36b4e2;
      }
      .closeModel {
        width: 24px;
        height: 24px;
        //background: url("../../image/public/close.png") no-repeat;
        background-size: 24px 24px;
        padding: 0;
        position: absolute;
        right: 1px;
        top: 1px;
      }
      .message {
        color: #191818;
        word-wrap: break-word;
        padding: 0.2rem 0.5rem 2rem 0.5rem;
        font-size: 1.3rem;
      }
      .model_btnBox {
        padding: 0;
        border-top: 1px solid #ddd;
        .btn {
          width: 47%;
          height: 1rem;
          padding: 0;
          color: #36b4e2;
          font-weight: 300;
          border: 0;
          background: #fff;
          outline: none;
          -webkit-appearance: none;
        }
      }
    }
    .rollIn {
      animation: rollIn 1s forwards;
      -webkit-animation: rollIn 1s forwards;
    }
    .rollOut {
      animation: rollOut 1s forwards;
      -webkit-animation: rollOut 1s forwards;
    }

  }
}
